<template>
  <Nav @actionUser="actionUser"></Nav>
  <div class="zw"></div>
  <div class="videoShowWaiKe">
    <div class="videoShowBody">
      <div class="showBodyLeft" ref="showBodyLeft">
        <video-show :url="videoUrl" :type="videoType"></video-show>
        <VideoMsg></VideoMsg>
        <CommentRP></CommentRP>
        <CommentPl :userId="token"></CommentPl>
      </div>
      <div class="showBodyRight">
        <login></login>
        <Epis-list @actionUrl="actionUrl"></Epis-list>
        <moreTJ></moreTJ>
      </div>
    </div>
  </div>
  <x-f></x-f>
</template>

<script setup>
import videoShow from '@/components/videoPlayer'
import EpisList from '@/components/episList'
import Login from '@/components/login'
import VideoMsg from '@/components/videoMsg'
import CommentRP from '@/components/CommentRP'
import CommentPl from '@/components/CommentPl'
import moreTJ from '@/components/moreTJ'
import Nav from '@/components/NavWhite.vue'
import {onBeforeUnmount, onMounted, ref} from 'vue'
import XF from "@/components/XF";

const showBodyLeft = ref(null)
const videoUrl = ref(null)
const videoType = ref(null)
const token = ref(null)
onMounted(() => {
  reSize()
  window.addEventListener('resize',reSize)

})

onBeforeUnmount(() => {
  window.removeEventListener('resize',reSize)
})

function reSize() {
  showBodyLeft.value.style = 'width:'+(document.body.offsetWidth*0.68-40)+'px;'

}
function actionUrl(value) {
  videoUrl.value = value.url
  videoType.value = value.type
}
function actionUser(value){
  token.value = value.userId
  console.log(value.userId)
}
</script>

<style lang="less" scoped>
.zw{
  width: 100%;
  height: 60px;
}
.videoShowWaiKe{
  width: 100%;
  padding: 30px 0;
}
.videoShowBody{
  height: 100%;
  max-width: 2540px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  box-sizing: content-box;
  position: relative;
  width: auto;
  padding: 0 10px;
}
.showBodyLeft{
  position: relative;
}
.showBodyRight{
  width: 350px;
  flex: none;
  margin-left: 30px;
  position: relative;
}
@media (min-width: 1681px) {
  .showBodyRight {
    width: 411px;
  }
  .but-jj{
    width: 70px;
  }
}
</style>
